#{extends 'logged_user.html' /}
#{set title:'Request Detail' /}
#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery.fullcalendar.css'}">
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/javascripts/gmaps.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="http://www.google.com/jsapi" type="text/javascript" charset="${_response_encoding}" ></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCG9Kc_QV1stkM1sPMZqdkPmXfb47u_HFc&sensor=false" type="text/javascript" charset="${_response_encoding}"  ></script>
<script src="@{'/public/javascripts/jquery.fullcalendar.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{/set}
<div id="main" style="padding-top:0px">
  <div class="post" style="padding:top:0px">
    <div class="right">
      <h3>${requestItem.title}</h3>
<iframe src="https://www.facebook.com/plugins/like.php?href=${(request.base+request.url).urlEncode().raw()}" scrolling="no" frameborder="0" style="border:none; width:450px; height:30px; margin-left:30px;"></iframe>
      <div class="restrictions">
#{if userApplications}
	<h4>Applications for Request</h4>
	<ul>
<li>
<label style="padding-top:7px">Approved</label>
        ${requestItem.getNumberOfApprovedParticipants()} out of ${requestItem.minNumberOfParticipants} to ${requestItem.maxNumberOfParticipants}
</li>
</ul>
<table>
#{list items: userApplications, as:'userApplication'}
<!-- Show Applications if the current user is the owner of the service or
	 Applications are approved -->
#{if (isRequestOwner) || (userApplication.getValue().status == userApplication.getValue().status.APPROVED)}
<tr>
	<td>
	<strong>${userApplication.getKey().fullname}</strong>
	</td>
	<td>
	<a href="@{Users.profile(userApplication.getKey().id)}">
    #{if userApplication.getKey().photo.exists()}
    	<img alt=" ${userApplication.getKey().fullname}'s avatar" src="@{Application.showUserPhoto(userApplication.getKey().id)}" class="lemiddleavatar"/>
    #{/if}
    #{else}
    	<img alt="Default Avatar" src="/public/images/lbi02.png" class="lepetitavatar" />
    #{/else}
    </a>
	</td>
	<td>
			  	<script type="text/javascript">
			 $(document).ready( function() {
				 deger = ${(int)userApplication.getKey().userRating};  
					for(i = 1; i < 6; i++)
					{
						if( i > deger)
						{
							$('#user_star_area_${(int)userApplication.getKey().id}').append('<img class="imgNon" style="width:14px;" src="/public/images/stars0.png" />');  
						}
						else
						{
							$('#user_star_area_${(int)userApplication.getKey().id}').append('<img class="imgNon" style="width:14px;" src="/public/images/stars1.png" />'); 
						}
					}
				});
			  </script>
		      <div id="user_star_area_${(int)userApplication.getKey().id}" style="width:70px; text-align: left;">
		      </div>
	</td>
		#{if isRequestOwner}
        	<td>
        	<div class="handshake_link">
        	#{if userApplication.getValue().status == userApplication.getValue().status.APPROVED}
				<b>ACCEPTED</b>
			#{/if}
			#{else}
				#{if requestItem.getNumberOfApprovedParticipants() >= requestItem.maxNumberOfParticipants}
					<a onclick="return false">MAXNUMREACHED</a>
				#{/if}
				#{else}
	    			<a href="@{Handshakes.accept(requestItem.id, userApplication.getKey().id)}">Accept</a>
				#{/else}
			#{/else}        
        	</div>
			</td>
		<td>
		<div class="ignore_link">
		#{if userApplication.getValue().status == userApplication.getValue().status.REJECTED}
			<b>REJECTED</b>
		#{/if}
		#{else}
	  		<a href="@{Handshakes.ignore(requestItem.id, userApplication.getKey().id)}">Ignore</a>
		#{/else}
        </div>
        </td>
		#{/if}
        #{else}
			<td colspan="2"></td>
		#{/else}
</tr>
#{/if}
#{/list}
</table>
  #{/if}
<br/>
	<h4>Details for Request</h4>
        <ul>
	  <li>
	    <label style="width:150px;">Title</label>
	    ${requestItem.title}
	  </li>
	  <li>
	    <label style="width:150px;">Description</label>
	    ${requestItem.description}
	  </li>
	  <li>
	    <label style="width:150px;">Is Virtual?</label>
	    <span id="txtVirtual"></span>
	    <input type="checkbox" style="visibility: hidden; display: none" id="chkVir" ${requestItem.isVirtual ? 'checked':''} />
	  </li>
	  	          <li>
        <label style="padding-top:7px">Number Of Participants</label>
        Min:${requestItem.minNumberOfParticipants} - Max:${requestItem.maxNumberOfParticipants}
      </li> 
      <li>
            <label style="width:150px;">Valid Until</label>
	    #{if requestItem.endsAt}
        <input class="roinput" type="text" readonly="readonly" value="${requestItem.endsAt.format('dd MMMM yyyy')}" />
        #{/if}
        #{else}
        <input class="roinput" type="text" value="" />
       #{/else}
       </li>
      	  <li>
	    <label style="width:150px;">Range</label>
	    ${requestItem.rangeFromLocation}
	    <input id="txt_range"  type="hidden" type="text" name="requestItem.rangeFromLocation" value="${requestItem.rangeFromLocation}" />  KM
        <input id="txt_location"  type="hidden" name="requestItem.location" value="${requestItem.location}" />
	  </li>
        </ul>
           <div id="map_canvas" style="width:500px; height:280px"></div>
      </div>
    </div>
    <div class="left">
      <a href="@{Users.profile(requestOwner.id)}">
	#{if requestOwner.photo.exists()}
	<img src="@{Application.showUserPhoto(requestOwner.id)}" alt="${requestOwner.fullname}" class="avatar" />
	#{/if}
	#{else}
	<img src="/public/images/lbi02.png" class="avatar" />
	#{/else}
      </a>
      <div class="post-meta">
        <ul>
           <li class="user">          
           <a href="@{Users.profile(requestOwner.id)}">           
          	${requestItem.owner.fullname}</a>
		  	<script type="text/javascript">
			 $(document).ready( function() {
				 deger = ${requestItem.owner.reputation};  
					for(i = 1; i < 6; i++)
					{
						if( i > deger)
						{
							$('#user_star_area').append('<img class="imgNon" style="width:15px;" src="/public/images/stars0.png" />');  
						}
						else
						{
							$('#user_star_area').append('<img class="imgNon" style="width:15px;" src="/public/images/stars1.png" />'); 
						}
					}
				});
			  </script>
		      <div id="user_star_area" style="width:130px; text-align: right;">
		      
		      </div>
		  </li>
          <li><h4>Social Credits to Receive</h4>${requestItem.getCredits().forOfferer()}</li>
          <li><h4>Duration</h4>${requestItem.duration} in hours</li>
        </ul>
      </div>
    </div>
    
    <!-- 
    <div class="post-meta">
      <h4>tags</h4>
      <p>
	${requestItem.tags.join(' ')}
      </p>
    </div> -->    
    
     <div class="post-meta">
      <h4>tags</h4>
      <p>
      #{list items:requestItem.tags, as:'requestTag'}
      <a href="@{Requests.search(requestTag)}">${requestTag}</a>
      #{/list}
      </p>
    </div>
    
    </div>
 <div class="apply_menu">
    #{if (someoneElsesRequest && !hasApplied) }
    	#{if requestItem.status == requestItem.status.COMPLETED}
    		<div class="alert alert-error">
	  		This service has been completed. You cannot apply to this request but you can search for other requests.
			</div>
    	#{/if}
    	#{else}   
    		 #{if requestItem.getNumberOfApprovedParticipants() >= requestItem.maxNumberOfParticipants}
    			<div class="alert alert-error">
	  			Maximum number of participants have been reached. You cannot apply to this request but you can search for other requests.
				</div>
    		#{/if}
    		#{else}    		 	
		    	#{if requestItem.getCredits().forOfferer() < user.balance}
		    		<a class="apply" href="@{Handshakes.bindTorequest(requestItem.id)}">Apply</a>
		    	#{/if}
		    	#{else}
		    		<div class="alert alert-error">
		  			You cannot apply to this request because you don't have enough credits. You need to complete more requests.
					</div>
		    	#{/else}
		    #{/else}
	    #{/else}
    #{/if}
    #{if hasApplied}
    <a class="cancel" href="@{Handshakes.cancelApplication(requestItem.id)}">Cancel</a>
    #{/if}
    #{if (isOfferOwner)}
    	#{if (offerItem.status == offerItem.status.HANDSHAKED)}
    		<a class="apply" href="@{Handshakes.setServiceCompleted(offerItem.id)}">Complete</a>
    	#{/if}
    	#{if (offerItem.status == offerItem.status.CREATED || offerItem.status == offerItem.status.HANDSHAKED)}
    		<a class="cancel" href="@{Handshakes.setServiceCancelled(offerItem.id)}">Cancel</a>
    	#{/if}
    	#{else}
    		<a class="cancel" href="@{Handshakes.setServiceReopen(offerItem.id)}">ReOpen</a>
    	#{/else}	    
    #{/if}
      </div>
    
    <!--  show comments for the current request -->
    #{include "partials/commentsForRequest.html" /}

    <div id="calendar"></div>
</div>
<script>
initialize();

$(document).ready(function() {
	$('#calendar').fullCalendar({
		firstDay: 0,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: false,
        events: [
            #{list items: requestItem.sessions, as:'session'}
            {
            	title: "${session.title}",
            	start: new Date("${session.startsAt.toGMTString()}"),
            	end: new Date("${session.endsAt.toGMTString()}"),
            	allDay: false
            },
            #{/list}
        ],
        timeFormat: "h:mm{ - h:mm}"
    });
});
</script>
